<!-- views/sales/commission/components/CommissionDetailDialog.vue -->
<template>
  <el-dialog
    v-model="visible"
    title="提成详情"
    width="900px"
    :before-close="handleClose"
  >
    <div class="commission-detail" v-if="commissionItem">
      <el-tabs v-model="activeTab">
        <el-tab-pane label="基本信息" name="basic">
          <el-descriptions :column="2" border>
            <el-descriptions-item label="销售人员">
              {{ commissionItem.salesperson }}
            </el-descriptions-item>
            <el-descriptions-item label="统计周期">
              {{ commissionItem.period }}
            </el-descriptions-item>
            <el-descriptions-item label="订单数量">
              {{ commissionItem.orderCount }}
            </el-descriptions-item>
            <el-descriptions-item label="订单总金额">
              ¥{{ commissionItem.totalAmount.toLocaleString() }}
            </el-descriptions-item>
            <el-descriptions-item label="提成比例">
              {{ commissionItem.commissionRate }}%
            </el-descriptions-item>
            <el-descriptions-item label="提成金额">
              ¥{{ commissionItem.commissionAmount.toLocaleString() }}
            </el-descriptions-item>
            <el-descriptions-item label="提成状态">
              <el-tag :type="getCommissionStatusType(commissionItem.status)">
                {{ getCommissionStatusText(commissionItem.status) }}
              </el-tag>
            </el-descriptions-item>
            <el-descriptions-item label="审核时间">
              {{ commissionItem.approvalDate || '未审核' }}
            </el-descriptions-item>
            <el-descriptions-item label="发放时间">
              {{ commissionItem.paymentDate || '未发放' }}
            </el-descriptions-item>
            <el-descriptions-item label="备注" :span="2">
              {{ commissionItem.remark || '无' }}
            </el-descriptions-item>
          </el-descriptions>
        </el-tab-pane>
        
        <el-tab-pane label="订单明细" name="orders">
          <el-table :data="orderDetails" v-loading="loadingOrders" style="width: 100%">
            <el-table-column prop="orderNumber" label="订单号" width="150" />
            <el-table-column prop="customerName" label="客户" width="150" />
            <el-table-column prop="orderAmount" label="订单金额" width="120">
              <template #default="scope">
                ¥{{ scope.row.orderAmount.toLocaleString() }}
              </template>
            </el-table-column>
            <el-table-column prop="commissionRate" label="提成比例" width="100">
              <template #default="scope">
                {{ scope.row.commissionRate }}%
              </template>
            </el-table-column>
            <el-table-column prop="commissionAmount" label="提成金额" width="120">
              <template #default="scope">
                ¥{{ scope.row.commissionAmount.toLocaleString() }}
              </template>
            </el-table-column>
            <el-table-column prop="orderDate" label="下单时间" width="120" />
            <el-table-column prop="status" label="订单状态" width="100">
              <template #default="scope">
                <el-tag :type="getOrderStatusType(scope.row.status)">
                  {{ getOrderStatusText(scope.row.status) }}
                </el-tag>
              </template>
            </el-table-column>
            <el-table-column prop="remark" label="备注" />
          </el-table>
          
          <div class="pagination-container">
            <el-pagination
              v-model:current-page="orderPagination.page"
              v-model:page-size="orderPagination.limit"
              :total="orderPagination.total"
              :page-sizes="[10, 20, 50]"
              layout="total, sizes, prev, pager, next, jumper"
              @size-change="handleOrderSizeChange"
              @current-change="handleOrderCurrentChange"
            />
          </div>
        </el-tab-pane>
        
        <el-tab-pane label="审核记录" name="approvals">
          <el-table :data="approvalRecords" style="width: 100%">
            <el-table-column prop="approver" label="审核人" width="120" />
            <el-table-column prop="action" label="操作" width="100">
              <template #default="scope">
                <el-tag :type="getApprovalActionType(scope.row.action)">
                  {{ getApprovalActionText(scope.row.action) }}
                </el-tag>
              </template>
            </el-table-column>
            <el-table-column prop="time" label="审核时间" width="150" />
            <el-table-column prop="remark" label="审核意见" />
          </el-table>
        </el-tab-pane>
        
        <el-tab-pane label="发放记录" name="payments">
          <el-timeline>
            <el-timeline-item
              v-for="(record, index) in paymentRecords"
              :key="index"
              :timestamp="record.timestamp"
              :type="record.type"
            >
              {{ record.content }}
              <div v-if="record.remark" class="record-remark">
                {{ record.remark }}
              </div>
            </el-timeline-item>
          </el-timeline>
        </el-tab-pane>
      </el-tabs>
    </div>
  </el-dialog>
</template>

<script setup lang="ts">
import { ref, computed, defineProps, defineEmits } from 'vue'

interface CommissionReportItem {
  id: number
  salesperson: string
  salespersonId: number
  period: string
  orderCount: number
  totalAmount: number
  commissionRate: number
  commissionAmount: number
  status: string
  approvalDate: string
  paymentDate: string
  remark: string
}

interface OrderDetail {
  id: number
  orderNumber: string
  customerName: string
  orderAmount: number
  commissionRate: number
  commissionAmount: number
  orderDate: string
  status: string
  remark: string
}

interface ApprovalRecord {
  id: number
  approver: string
  action: string
  time: string
  remark: string
}

interface PaymentRecord {
  timestamp: string
  content: string
  type: '' | 'primary' | 'success' | 'warning' | 'danger' | 'info'
  remark: string
}

const props = defineProps<{
  modelValue: boolean
  commissionItem: CommissionReportItem | null
}>()

const emit = defineEmits<{
  (e: 'update:modelValue', value: boolean): void
  (e: 'close'): void
}>()

const visible = computed({
  get: () => props.modelValue,
  set: (value) => emit('update:modelValue', value)
})

const activeTab = ref('basic')
const loadingOrders = ref(false)

const orderDetails = ref<OrderDetail[]>([
  {
    id: 1,
    orderNumber: 'PO20230101001',
    customerName: '阿里巴巴集团',
    orderAmount: 100000,
    commissionRate: 10,
    commissionAmount: 10000,
    orderDate: '2023-01-01',
    status: 'completed',
    remark: '政采云平台订单'
  }
])

const approvalRecords = ref<ApprovalRecord[]>([
  {
    id: 1,
    approver: '财务经理',
    action: 'approve',
    time: '2023-01-15 14:30',
    remark: '审核通过'
  }
])

const paymentRecords = ref<PaymentRecord[]>([
  {
    timestamp: '2023-01-20 09:15',
    content: '提成已发放至工资账户',
    type: 'success',
    remark: '银行转账单号：20230120001'
  }
])

const orderPagination = ref({
  page: 1,
  limit: 10,
  total: 1
})

const handleClose = () => {
  visible.value = false
  emit('close')
}

const handleOrderSizeChange = (size: number) => {
  orderPagination.value.limit = size
  // loadOrderDetails()
}

const handleOrderCurrentChange = (page: number) => {
  orderPagination.value.page = page
  // loadOrderDetails()
}

const getCommissionStatusType = (status: string) => {
  switch (status) {
    case 'pending': return 'info'
    case 'approved': return 'primary'
    case 'paid': return 'success'
    case 'rejected': return 'danger'
    default: return 'info'
  }
}

const getCommissionStatusText = (status: string) => {
  switch (status) {
    case 'pending': return '待审核'
    case 'approved': return '已审核'
    case 'paid': return '已发放'
    case 'rejected': return '已拒绝'
    default: return '未知'
  }
}

const getOrderStatusType = (status: string) => {
  switch (status) {
    case 'pending_payment': return 'info'
    case 'paid': return 'primary'
    case 'shipped': return 'warning'
    case 'completed': return 'success'
    case 'cancelled': return 'danger'
    case 'refunded': return 'danger'
    default: return 'info'
  }
}

const getOrderStatusText = (status: string) => {
  switch (status) {
    case 'pending_payment': return '待付款'
    case 'paid': return '已付款'
    case 'shipped': return '已发货'
    case 'completed': return '已完成'
    case 'cancelled': return '已取消'
    case 'refunded': return '已退款'
    default: return '未知'
  }
}

const getApprovalActionType = (action: string) => {
  switch (action) {
    case 'approve': return 'success'
    case 'reject': return 'danger'
    case 'adjust': return 'warning'
    default: return 'info'
  }
}

const getApprovalActionText = (action: string) => {
  switch (action) {
    case 'approve': return '通过'
    case 'reject': return '拒绝'
    case 'adjust': return '调整'
    default: return '未知'
  }
}
</script>

<style scoped>
.commission-detail {
  padding: 20px 0;
}

.el-divider {
  margin: 20px 0;
}

.pagination-container {
  margin-top: 20px;
  display: flex;
  justify-content: flex-end;
}

.record-remark {
  margin-top: 4px;
  font-size: 12px;
  color: #909399;
}
</style>